<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="message_style.css"/>

</head>

<body>
    <header id="header">
    <div id="back1" onclick="backback();"><img id="back2" src="../../image/back.png" alt=""></div>
    <div id="interaction">互动</div>
    </header>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">

    apiready = function() {
      var header = $api.byId('header');
      var headerH = $api.offset(header).h;
      var footerH = $api.getStorage('footerH1');
      api.openFrame({
          name: 'interaction',
          url: './interaction.html',
          bounces: true,
          rect: { // 推荐使用Margin布局，用于适配屏幕的动态变化
              marginTop: headerH+6, // main页面距离win顶部的高度
              marginBottom: footerH, // main页面距离win底部的高度
              w: api.winWidth // main页面的宽度 自适应屏幕宽度
          }
      });
    };
    function backback(){
        api.closeFrame({
            name: 'interaction'
        });
        api.closeFrame({
            name: 'interaction_head'
        });

    }
</script>

</html>
